<template>
  <div class="comment">
    <!-- 选项卡 -->
    <el-tabs v-model="param.status">
      <el-tab-pane label="所有评论" name="all"></el-tab-pane>
      <el-tab-pane label="待审核" name="待审核"></el-tab-pane>
      <el-tab-pane label="审核通过" name="审核通过"></el-tab-pane>
      <el-tab-pane label="审核不通过" name="审核不通过"></el-tab-pane>
    </el-tabs>
    <!-- 评论列表 -->
    <!-- 表格_all -->
    <el-table
      :data="comments"
      row-key="id"
      size="small"
      :tree-props="{children: 'follow'}"
      v-if="param.status=='all'"
    >
       <el-table-column label="#" type="index" :index="1" width="40"></el-table-column>
      <el-table-column label="订单号" prop="order.id" width="100"></el-table-column>
      <el-table-column label="员工" prop="order.employee.realname" width="75"></el-table-column>
      <el-table-column label="顾客" prop="order.customer.realname" width="85"></el-table-column>
      <el-table-column label="评论时间" width="160">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{getTime(scope.row.commentTime)}}</span>
        </template>
      </el-table-column>
      <el-table-column label="评分" prop="score" width="85" align="center"></el-table-column>
      <el-table-column label="评论" prop="content"></el-table-column>
      <el-table-column label="状态" prop="status" width="80"></el-table-column>
      <el-table-column label="操作" width="160" align="center">
        <template v-slot="scope">
          <el-button
            type="text"
            size="mini"
            v-if="scope.row.status=='待审核'"
            @click="check(scope.row, '审核通过')"
          >审核通过</el-button>
          <el-button
            type="text"
            size="mini"
            v-if="scope.row.status=='待审核'"
            @click="check(scope.row, '审核不通过')"
          >审核不通过</el-button>
          <el-button
            type="text"
            size="mini"
            v-else-if="scope.row.status=='审核通过'"
            @click="check(scope.row, '审核不通过')"
          >审核不通过</el-button>
          <el-button
            type="text"
            size="mini"
            v-else-if="scope.row.status=='审核不通过'"
            @click="check(scope.row, '审核通过')"
          >审核通过</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 表格结束_all -->

    <!-- 表格 -->
    <el-table size="mini" :data="comments" v-else>
      <el-table-column label="#" type="index" :index="1" width="40"></el-table-column>
      <el-table-column label="订单号" prop="order.id" width="100"></el-table-column>
      <el-table-column label="员工" prop="order.employee.realname" width="75"></el-table-column>
      <el-table-column label="顾客" prop="order.customer.realname" width="85"></el-table-column>
      <el-table-column label="评论时间" width="160">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{getTime(scope.row.commentTime)}}</span>
        </template>
      </el-table-column>
      <el-table-column label="评分" prop="score" width="85" align="center"></el-table-column>
      <el-table-column label="评论" prop="content"></el-table-column>
      <el-table-column label="状态" prop="status" width="80"></el-table-column>
      <el-table-column label="操作" width="160" align="center">
        <template v-slot="scope">
          <el-button
            type="text"
            size="mini"
            v-if="scope.row.status=='待审核'"
            @click="check(scope.row, '审核通过')"
          >审核通过</el-button>
          <el-button
            type="text"
            size="mini"
            v-if="scope.row.status=='待审核'"
            @click="check(scope.row, '审核不通过')"
          >审核不通过</el-button>
          <el-button
            type="text"
            size="mini"
            v-else-if="scope.row.status=='审核通过'"
            @click="check(scope.row, '审核不通过')"
          >审核不通过</el-button>
          <el-button
            type="text"
            size="mini"
            v-else-if="scope.row.status=='审核不通过'"
            @click="check(scope.row, '审核通过')"
          >审核通过</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- /表格 -->
  </div>
</template>

<script>
import { get, post } from "@/utils/request";
export default {
  data() {
    return {
      param: {
        status: "all"
      },
      visible: false,
      comments: [],
      time: ""
    };
  },
  created() {
    this.loadComments();
  },
  watch: {
    // 监听param的变化，一旦变化立刻查询
    param: {
      handler: function() {
        this.loadComments();
      },
      deep: true
    }
  },
  methods: {
    // 加载评论信息
    loadComments() {
      // 1. 克隆param
      let param = Object.assign({}, this.param);
      let url = "";
      if (param.status == "all") {
        url = "http://47.92.81.116:8888/comment/queryComments";
      } else {
        url = "http://47.92.81.116:8888/comment/queryComments_normal";
      }
      // 2. 处理数据
      // 当状态为all，说明查询所有评论，不对评论状态进行过滤，将这个属性置空即可
      if (param.status == "all") {
        param.status = "";
      }
      get(url, param).then(response => {
        this.comments = response.data;
      });
    },
    check(row, status_check) {
      let url = "http://47.92.81.116:8888/comment/checkComment";
      post(url, { id: row.id, status: status_check }).then(response => {
        this.$message({ type: "success", message: response.message });
        this.loadComments();
      });
      this.visible = false;
    },
    getTime(time) {
      return new Date(parseInt(time))
        .toLocaleString()
        .replace(/:\d{1,2}$/, " ");
    }
  }
};
</script>